<template>
  <div id="credited">
    <x-header :left-options="{backText: ''}">
      收款账户管理
      <a slot="right"
         @click="$router.push('/myaddweixinuser')">
        <b style="font-size: .3rem;">添加账户</b>
      </a>
    </x-header>
    <div class="cred_con">
      <ul>
        <li v-for="(item, index) in data"
            :key="index">
          <div class="cred_con_flex"><i class="zfb-icon"></i></div>
          <div class="cred_con_flex">
            <p>{{item.account_type === 1 ? '支付宝' : '银行卡'}}</p>
          </div>
          <div class="cred_con_flex">
            <p>{{item.account_number}}</p>
          </div>
          <div class="cred_con_flex">
            <p>{{item.account_name}}</p>
          </div>
          <div class="cred_con_flex"><span @click="deleteOneItemInfo(item.account_id)">删除</span></div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getPaymenAccountList, deletepaymentaccount } from '@api'
import { mapState } from 'vuex'

export default {
  name: 'credited',
  data () {
    return {
      data: []
    }
  },
  computed: {
    ...mapState(['user'])
  },
  created () {
  },
  activated () {
    this.data = []
    this.fetchGetData()
  },
  methods: {
    async fetchGetData () {
      // 获取用户收款账户列表
      var userid = this.user.user_id
      var usertype = 2
      let res = await getPaymenAccountList(userid, usertype)
      if (res.code === 200) {
        res.data.forEach(element => {
          if (element.account_type === 1) {
            this.data.push(element)
          }
        })
      }
    },
    async deleteOneItemInfo (accountid) {
      let res = await deletepaymentaccount(accountid)
      if (res.code === 200) {
        this.$vux.alert.show({
          title: '提示',
          content: '删除成功!'
        })
      }
    }
  }
}
</script>

<style lang="less" scoped="scoped">
#credited {
  .cred_con {
    padding: 0.1rem 0;
    ul {
      li {
        display: flex;
        justify-content: space-around;
        flex-wrap: nowrap;
        background: #ffffff;
        padding: 0 0.2rem;
        margin-bottom: 0.1rem;
        div.cred_con_flex {
          width: 100%;
          height: 0.95rem;
          line-height: 0.95rem;
          display: inline-block;
          text-align: center;
          padding: 0 0.1rem;
          p {
            font-size: 0.32rem;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(0, 0, 0, 1);
          }
          span {
            font-size: 0.32rem;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
          }
        }
      }
    }
  }
}
</style>
